<!-- 权限管理页面 -->


<div class="col-md-1"><button type="button" id="power_add" class="btn btn-success" data-toggle="modal" data-target="#powerModal">添加</button></div>

<table class="table table-hover" id="power_table">
    <thead>
        <td></td>
        <td>名称</td>
        <td>路径</td>
        <td>类型</td>
        <td>序号</td>
        <td>图标</td>
        <td>状态</td>
        <td>操作</td>
    </thead>
    <tbody></tbody>
</table>
<!-- 新增修改的模态框Modal -->
<div class="modal fade" id="powerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="dialog-center">
                    <div>
                        <b>名称:</b>
                        <input class="form-control" type="text" name="name" required>
                    </div>
                    <div>
                        路径:
                        <input class="form-control" type="text" name="route">
                    </div>
                    <div>
                        类型:
                        <select class="form-control" name="type" id="form_type">
                            <option value="menu" selected="selected">菜单</option>
                            <option value="method">方法</option>
                        </select>
                    </div>
                    <div>
                        父权限:
                        <select class="form-control" name="parentId" id="form_parentId"></select>
                    </div>
                    <div>
                        图标:
                        <input class="form-control" type="text" name="icon">
                    </div>
                    <div>
                        序号:
                        <input class="form-control" type="text" name="num">
                    </div>
                    <div class="radio-inline">
                        状态:
                    </div>
                    <div class="radio-inline">
                        <input type="radio" name="hidden" value="0" id="0"><label for="0">显示</label>
                    </div>
                    <div class="radio-inline">
                        <input type="radio" name="hidden" value="1" id="1"><label for="1">隐藏</label>
                    </div>
                    <div>
                        描述:
                        <textarea name="description" class="form-control" id="" cols="30" rows="3"></textarea>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                <button type="button" class="btn btn-primary" id="power_submit">提交</button>
            </div>
        </div>
    </div>
</div>

<script>
    function getpowerMsg() {
        $.get(baseURL + '/privilege/findPrivilegeTree', function(res) {
            // alert(res.message)
            //清空tbody
            $('#power_table tbody').empty();
            res.data.forEach(function(item, index) {
                //item-->每个用户对象
                var newTr = $(`                    
                    <tr data-index="${index}">
                        <td class='powertree' data-id="${item.id}" data-index="${index}"><i class="fa fa-angle-right" aria-hidden="true"  data-index="${index}"></i></td>
                        <td>${item.name}</td>
                        <td>${item.route}</td>
                        <td>${item.type}</td>
                        <td>${item.num}</td>
                        <td>${item.icon}</td>
                        <td>${item.hidden == 0 ? '显示' : '隐藏'}</td>
                        <td>
                        <button data-id="${item.id}" class="btn btn-danger" id="power_delete">移除</button>
                        <button data-item='${JSON.stringify(item)}' class="btn btn-default" id="power_update" data-toggle="modal" data-target="#powerModal">修改</button>
                        </td>
                    </tr>`);
                $('#power_table tbody').append(newTr)
            })
        });
    }
    getpowerMsg();

    //查询子权限列表
    var treecount = 1;
    $('#power_table tbody').on('click', '.powertree', function() {
        //获取data-id值 attr
        var id = $(this).attr('data-id');
        dataindex = $(this).attr('data-index');
        // alert(id)
        //奇数次点击 显示
        if (treecount % 2 == 1) {
            $.get(baseURL + '/privilege/findByParentId', {
                id: id
            }, function(res) {
                // console.log(res);
                $('#power_table .treetr').remove();
                res.data.forEach(function(item, index) {
                    //item-->每个用户对象
                    var newTr = $(`                    
                    <tr class='treetr'>
                        <td data-id="${item.id}"></td>
                        <td>&nbsp;&nbsp;${item.name}</td>
                        <td>${item.route}</td>
                        <td>${item.type}</td>
                        <td>${item.num}</td>
                        <td>${item.icon}</td>
                        <td>${item.hidden == 0 ? '显示' : '隐藏'}</td>
                        <td>
                        <button data-id="${item.id}" class="btn btn-danger" id="power_delete">移除</button>
                        <button data-item='${JSON.stringify(item)}' class="btn btn-default" id="power_update" data-toggle="modal" data-target="#powerModal">修改</button>
                        </td>
                    </tr>`);
                    // console.log(dataindex);
                    $('#power_table tbody tr').eq(dataindex).after(newTr)

                })
            })
            $('tr i').attr('class', 'fa fa-angle-right');
            $('i[data-index = ' + dataindex + ']').attr('class', 'fa fa-angle-right fa-rotate-90');
            // $('.treetr').fadeIn();
        }
        //偶数次点击 隐藏
        else {
            $('tr i').attr('class', 'fa fa-angle-right');
            $('#power_table .treetr').remove();
        }
        treecount++;
    })

    $.get(baseURL + '/privilege/findByParentId', function(res) {
        // console.log(res.data);
        //清空下拉列表
        $('select[name=parentId]').empty();
        $('select[name=parentId]').append(`<option value="">请选择父栏目</option>`)
        res.data.forEach(function(item) {
            var newOpt = $(`
              <option value="${item.id}">${item.name}</option>
              `)
            $('select[name=parentId]').append(newOpt)
        })
    })

    //添加功能
    $("#power_add", ).click(function() {
        //清空user,设置模态框头部
        user = null;
        $('.modal-title').html('新增权限');
        //清空表单数据
        $('#powerModal input').val('');
        $('#powerModal select').val('');
        $('select[name=type]').val('menu');
        $('input[name=hidden]').prop('checked', false);
        $('#powerModal textarea').val('');
    });

    //修改功能事件代理 id="power_update"
    $('#power_table tbody').on('click', '#power_update', function() {
        user = $(this).attr('data-item');
        user = JSON.parse(user);
        // console.log(user);
        // console.log(user.hidden);
        $('input[name=name]').val(user.name);
        $('select[name=parentId]').val(user.parentId);
        $('input[name=route]').val(user.route);
        $('input[name=num]').val(user.num);
        $('input[name=icon]').val(user.icon);
        $('select[name=type]').val(user.type);
        $('input[name=hidden][value=' + user.hidden + ']').prop('checked', true);
        $('textarea[name=description]').val(user.description);
        //设置模态框标题
        $('.modal-title').html('修改权限')
    });

    //新增修改提交按钮  新增:保存数据  修改:更新数据   传id代表修改,不传id代表新增
    $("#power_submit").click(function() { //给后加的节点绑定事件
        //获取用户输入的信息
        var name = $('input[name=name]').val();
        var parentId = $('select[name=parentId]').val();
        var route = $('input[name=route]').val();
        var num = $('input[name=num]').val();
        var type = $('select[name=type]').val();
        var icon = $('input[name=icon]').val();
        var hidden = $('input[name=hidden]:checked').val();
        var description = $('textarea[name=description]').val();
        // console.log(name, parentId, route, num, type, icon, hidden, description);
        //访问后台接口,保存到数据库,保存成功之后刷新数据
        $.post(baseURL + '/privilege/saveOrUpdate', {
            id: user ? user.id : '',
            num: num,
            name: name,
            type: type,
            icon: icon,
            parentId: parentId,
            route: route,
            hidden: hidden,
            description: description,
        }, function(res) {
            console.log(res);
            //提示保存成功
            if (res.status == 200) {
                // alert('保存成功');
                getpowerMsg();
            }
        });
        $("#powerModal").modal("hide")
        $('.modal-backdrop').remove(); //去掉遮罩层
    })

    //移除功能,事件代理 id="power_delete"
    $('#power_table tbody').on('click', '#power_delete', function() {
        // console.log(this);
        //获取data-id值 attr
        //attr('name','test') prop()
        var id = $(this).attr('data-id');
        console.log(id);
        if (confirm('确认删除?')) {
            $.ajax({
                url: baseURL + '/privilege/deleteById',
                type: 'DELETE',
                data: {
                    id: id
                },
                success: function(res) {
                    console.log(res);
                    getpowerMsg();
                }
            });
        }
    });
</script>
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<style>
    label,
    .powertree {
        cursor: pointer;
    }
    
    #form_type,
    #form_parentId {
        width: 200px;
    }
</style>